<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #08e7ef;
    }

    #smoke-box {
      position: absolute;
      width: 1px;
      height: 160px;
      bottom: 50%;
      left: 50%;
      z-index: 3;
    }

    #smoke-box span {
      display: block;
      position: absolute;
      left: 50%;
      bottom: -35px;
      margin-left: -20px;
      width: 0;
      height: 0;
      border: 35px solid #4b4b4b;
      border-radius: 35px;
      opacity: 0;
      transform: scale(0.2);
    }

    @keyframes smoke-boxL {
      0% {
        transform: scale(0.2) translate(0, 0)
      }

      10% {
        opacity: 1;
        transform: scale(0.2) translate(0, -5px)
      }

      100% {
        opacity: 0;
        transform: scale(1) translate(-20px, -130px)
      }
    }

    @keyframes smoke-boxR {
      0% {
        transform: scale(0.2) translate(0, 0)
      }

      10% {
        opacity: 1;
        transform: scale(0.2) translate(0, -5px)
      }

      100% {
        opacity: 0;
        transform: scale(1) translate(20px, -130px)
      }
    }

    #smoke-box .s0 {
      animation: smoke-boxL 10s 0s infinite
    }

    #smoke-box .s1 {
      animation: smoke-boxR 10s 1s infinite
    }

    #smoke-box .s2 {
      animation: smoke-boxL 10s 2s infinite
    }

    #smoke-box .s3 {
      animation: smoke-boxR 10s 3s infinite
    }

    #smoke-box .s4 {
      animation: smoke-boxL 10s 4s infinite
    }

    #smoke-box .s5 {
      animation: smoke-boxR 10s 5s infinite
    }

    #smoke-box .s6 {
      animation: smoke-boxL 10s 6s infinite
    }

    #smoke-box .s7 {
      animation: smoke-boxR 10s 7s infinite
    }

    #smoke-box .s8 {
      animation: smoke-boxL 10s 8s infinite
    }

    #smoke-box .s9 {
      animation: smoke-boxR 10s 9s infinite
    }
  </style>
</head>

<body>
  <div id="smoke-box">
    <span class="s0"></span>
    <span class="s1"></span>
    <span class="s2"></span>
    <span class="s3"></span>
    <span class="s4"></span>
    <span class="s5"></span>
    <span class="s6"></span>
    <span class="s7"></span>
    <span class="s8"></span>
    <span class="s9"></span>
  </div>
</body>

</html>